<template>
  <transition name="fade-opacity">
    <div v-show="showMarketingBuyBtn && (isCollage || isFriendHelp || isBargain)" class="c-ph40 c-br8 c-box-shadow7 c-bg-white c-flex-column c-hh160 c-pa c-p-r0 p-t-180 c-pz101">
      <div @click="clickBuyNow" class="c-fs28 c-fc-sblack c-flex-grow1 c-bd-b1 c-flex-row c-aligni-center c-ws-n">
        直接购买<span class="c-lh c-ml20">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
      </div>
      <div @click="marketingBuy" :class="btnActivate ? 'theme-fc' : 'c-fc-sgray'" class="c-fs28 c-flex-grow1 c-flex-row c-aligni-center c-ws-n">
        {{isCollage ? '发起拼团': isFriendHelp ? '灌溉领取' : isBargaining ? '正在砍价' : '砍价享'}}<span class="c-lh c-ml20">{{'￥' | iosPriceFilter}}{{isFriendHelp ? 0.00 : marketingPrice}}</span>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'MarketingBuyBtn',
  props: {
    isCollage: {
      type: Boolean,
      default: false,
    },
    isFriendHelp: {
      type: Boolean,
      default: false,
    },
    isBargain: {
      type: Boolean,
      default: false,
    },
    showMarketingBuyBtn: {
      type: Boolean,
      default: false,
    },
    calculationPrice: {
      type: Number,
      default: 0
    },
    marketingPrice: {
      type: Number,
      default: 0
    },
    btnActivate: {
      type: Boolean,
      default: true
    },
    isBargaining: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  data() {
    return {
    }
  },

  methods: {
    marketingBuy () {
      this.$emit('marketingBuy')
    },
    clickBuyNow () {
      this.$emit('clickBuyNow')
    }
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>

<style scoped>
.p-t-180 {
  top: -4.5rem;
}
</style>
